<template>
  <view class="menuWrap" v-if="menuListActiveIndex > -1">
    <view style="height: 60px"></view>
    <cover-view class="appMenuList">
      <cover-view class="appMenuLi" @click="menuClick(n,i)"
         v-for="(n,i) in modelGet('appInfo.menuList')" :key="i">
<!--        <cover-view class="appMenuLiIcon" :class="menuListActiveIndex === i ? n.selectedIconPath : n.iconPath"></cover-view>-->
        <cover-image class='appMenuLiIcon' :src="menuListActiveIndex === i ? n.selectedIconPath : n.iconPath" mode="aspectFill"></cover-image>
        <cover-view class="appMenuLiText" :class="menuListActiveIndex === i ? 'appMenuLiTextActive' : ''">
          {{ n.text }}
        </cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

/*
* 查询到顶部焦点
* */
const menuListActiveIndexGet = (path) => {
  let menuList = util.modelGet('appInfo.menuList')
  let menuListActiveIndex = -1
  _.each(menuList, (n, i) => {
    if (n.pagePath && new RegExp(n.pagePath).test(path)) {
      menuListActiveIndex = i
    }
  })
  return menuListActiveIndex
}

export default {
  props: {
    // 检测类型 + 其他验证
    title: {
      type: String,
      default: 'name',
    },
    config: {
      type: Object,
    },
  },
  components: {},
  data(){
    return {
      path: this.$Route.path,
      menuListActiveIndex: menuListActiveIndexGet(this.$Route.path),
      list: [],
    }
  },
  computed: {},
  onShow(){
    // 组件中不执行
    console.log(`onShow`, 1)
  },
  onLoad(){
    // 组件中不执行
    console.log(`onLoad`, 1)
  },
  mounted(){
    // 新进入一个页面执行 (上个页面按顶部菜单返回当前页面:不执行)
    console.log(`computed 47`, 1)
  },
  methods: {
    menuClick(n, i){
      console.log(`n,i`, n, i)
      this.modelSet('appInfo.menuListActiveIndex', i)
      util.linkTo(n.pagePath, 'replaceAll')
    },
    showLogin(){
      this.modelSet('home.modalLoginVisible', true)
    },
  },
}
</script>
<style lang="scss">
.menuWrap {

  .appMenuList {
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed;

    z-index: 10;

    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;

    border-top: 1px solid lightgray;

    height: 120px;
    box-sizing: border-box;
    .appMenuLi {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      .appMenuLiIcon {
        width: 64px;
        height: 64px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
      }
      .menu_40 {
        background-image: url(#{$bgPath}/menu_40.png);
      }
      .menu_41 {
        background-image: url(#{$bgPath}/menu_41.png);
      }
      .menu_00 {
        background-image: url(#{$bgPath}/menu_00.png);
      }
      .menu_01 {
        background-image: url(#{$bgPath}/menu_01.png);
      }
      .menu_10 {
        background-image: url(#{$bgPath}/menu_10.png);
      }
      .menu_11 {
        background-image: url(#{$bgPath}/menu_11.png);
      }
      .menu_20 {
        background-image: url(#{$bgPath}/menu_20.png);
      }
      .menu_21 {
        background-image: url(#{$bgPath}/menu_21.png);
      }
      .menu_30 {
        background-image: url(#{$bgPath}/menu_30.png);
      }
      .menu_31 {
        background-image: url(#{$bgPath}/menu_31.png);
      }
      .appMenuLiText {
        font-size: 22px;
        font-weight: 400;
        color: #6E7C89;
      }
      .appMenuLiTextActive {
        color: #177FFF;
      }
    }
  }
}
</style>
